<template>
<div class="mt-4" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">
  <div class="container-fluid">
    <div class="card">
      <div class="card-body">
        <!--头部商品列表div-->
        <div class="mt-3">
          <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 商品列表</p>
        </div>

        <!--主体内容-->

        <div class="ml-3">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!--1-->
            <el-tab-pane label="已上架" name="first">

              <!--头部搜索模糊查询-->
              <div class="row mt-2">
                <div class="col-8 ml-3 mr-5 form-inline">
                  <span>商品名称&emsp;</span>
                  <input type="text" class="form-control" placeholder="请输入商品名称" style="width: 250px" v-model="name"></input>
                  <button type="button" class="btn btn-outline-secondary ml-4" @click="getGoodsInfo(1)">&emsp;搜索&emsp;</button>
                </div>


              </div>
              <!--中间表格-->
              <div class="col-12 mt-5">
                <table class="table table-striped table-hover" >
                  <thead>
                  <tr>
                    <th>商品ID</th>
                    <th>商品名称</th>
                    <th>商品分类</th>
                    <th>商品详情</th>
                    <th>价格</th>
                    <th>商品状态</th>
                  </tr>
                  </thead>

                  <tbody>
                  <tr v-for="(item,index) in goodsInfoList.list" :key="index">
                    <td>{{item.id}}</td>
                    <td class="p-0">
                        <div>
                          <span style="font-size: 15px">{{item.name}}</span>
                        </div>
                    </td>
                    <td v-if="item.categoryId == 1">蔬菜</td>
                    <td v-if="item.categoryId == 2">肉类</td>
                    <td v-if="item.categoryId == 3">主食</td>
                    <td v-if="item.categoryId == 4">汤品</td>
                    <td v-if="item.categoryId == 5">酒水</td>
                    <td>{{item.description}}</td>
                    <td>{{item.price}}</td>
                    <td>
                      <span class="badge badge-success" v-if="item.status == 1">正常</span>
                      <span class="badge badge-warning" v-if="item.status == 2">售罄</span>
                      <span class="badge badge-danger" v-if="item.status == 3">下架</span>
                    </td>
                    <td>



<!--                      &lt;!&ndash; 上架编辑模态框 &ndash;&gt;
                      <button type="button" class="btn btn-outline-secondary btn-sm"  data-toggle="modal" data-target="#put-edit">
                        <span style="font-size: 13px">编辑</span>
                      </button>
                      &lt;!&ndash; Modal &ndash;&gt;
                      <div class="modal fade mt-5" id="put-edit" tabindex="-1" aria-labelledby="#put-Lable" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h6 class="modal-title" id="put-Lable">编辑</h6>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body" >
                              <div class="">
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right">排序&emsp;</div>
                                  <div class="col-6" align="left"><input type="text" class="form-control"></input></div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right"><span>商品名称&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6" align="left"><input type="text" class="form-control"></input></div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right"><span>商品分类&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6" align="left">
                                    <select class="form-control" style="width: 160px">
                                      <option>沙比</option>
                                      <option>憨憨</option>
                                    </select>
                                  </div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right"><span>商品图片&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6" align="left">
                                    <input type="file" id="put_ShopImgSelect" v-on:change="put_change()" class="mb-1">
                                    <div style="width: 80px;height: 80px;border: 1px solid #f6f6f6">
                                      <img src=" " id="put_ShopImg" alt="" width="80px" height="80px">
                                    </div>
                                  </div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline" >
                                  <div class="col-4" align="right" ><span>商品详情&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6" align="left">
                                    <textarea style="width: 250px;height: 80px"></textarea>
                                  </div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right"><span>默认规格&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6" align="left">
                                    <select class="form-control" style="width: 160px">
                                      <option>小份</option>
                                      <option>憨憨</option>
                                    </select>
                                  </div>
                                </div>
                                <div class="col-10 ml-4 mb-4 row">
                                  <div class="col-4 " align="right"><span>特色分类&nbsp;<span style="color: red">*</span></span></div>
                                  <div align="left" class="col-6">

                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio"  name="feature" id="feature1" value="put-option1">
                                      <label class="form-check-label" for="feature1">无</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio"  name="feature" id="feature2" value="put-option2">
                                      <label class="form-check-label" for="feature2">新品</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio"   name="feature" id="feature3" value="put-option3">
                                      <label class="form-check-label" for="feature3">热卖</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio"   name="feature" id="feature4" value="put-option4">
                                      <label class="form-check-label" for="feature4">推荐</label>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right"><span>价格&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6 input-group" align="left" >
                                    <input type="number" class="form-control col-5" step="0.01" max="999" min="0.10"></input>
                                    <div class="input-group-append">
                                      <span class="input-group-text" id="put-basic">元</span>
                                    </div></div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right"><span>库存&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6 input-group" align="left" >
                                    <input type="number" class="form-control col-5"  max="999" min="0"></input>
                                    <div class="input-group-append">
                                      <span class="input-group-text" id="put-basic2">件</span>
                                    </div></div>
                                </div>
                              </div>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-primary">保存</button>
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                            </div>
                          </div>
                        </div>
                      </div>
                      &emsp;
                      &lt;!&ndash; 上架会员价模态框 &ndash;&gt;
                      <button type="button" class="btn btn-outline-warning btn-sm"  data-toggle="modal" data-target="#put-user">
                        <span style="font-size: 13px">会员价</span>
                      </button>
                      &lt;!&ndash; Modal &ndash;&gt;
                      <div class="modal fade mt-5" id="put-user" tabindex="-1" aria-labelledby="#put-user-lable" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h6 class="modal-title" id="put-user-lable">会员价</h6>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body" style="width: 750px" >
                              <div class="col-12" >
                                <div class="col-12 ml-4">
                                  <div class="form-group">
                                    <label for="">商品是否参与折扣</label>
                                  </div>
                                  <div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" v-on:click="zhekou1_click" name="RadioOptions" id="zhekou1" value="put-zhekou1">
                                      <label class="form-check-label" for="zhekou1">是</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio"  v-on:click="zhekou2_click" name="RadioOptions" id="zhekou2" value="put-zhekou2">
                                      <label class="form-check-label" for="zhekou2">否</label>
                                    </div>
                                  </div>
                                </div>
                                <div v-show="flag" class="col-12" align="center">
                                  <table class=" col-12" style="width: 700px">
                                    <thead>
                                    <tr align="center">

                                      <th>VIP等级</th>
                                      <th>会员折扣</th>
                                      <th>启用状态</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    <tr align="center" >
                                      <td class="col-4" >1</td>
                                      <td class="col-4"><input type="number" class="form-control " step="0.01" min="0" max="1"> </td>
                                      <td  class="col-4"> <el-switch v-model="switch_table" /></td>
                                    </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </div>
                            </div>
                            &lt;!&ndash;尾部&ndash;&gt;
                            <div class="modal-footer">
                              <button type="button" class="btn btn-primary">保存</button>
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            </div>
                          </div>
                        </div>
                      </div>

                    </td>
                  </tr>
                  </tbody>
                </table>
                <nav aria-label="Page navigation example">
                  <ul class="pagination">
                    <li class="page-item">
                      <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                      <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
              </div>
            </el-tab-pane>
            &lt;!&ndash;2&ndash;&gt;
            <el-tab-pane label="待上架" name="five">
              &lt;!&ndash;头部搜索模糊查询&ndash;&gt;
              <div class="row mt-2">
                <div class="col-8 ml-3 mr-5 form-inline">
                  <span>商品名称&emsp;</span>
                  <input type="text" class="form-control" placeholder="请输入商品名称" style="width: 250px"></input>
                  <span>&emsp;&emsp;商品分类&emsp;</span>
                  <select name="" class="form-control col-2">
                    <option value="">全部</option>
                  </select>
                  <button type="button" class="btn btn-outline-secondary ml-4">&emsp;搜索&emsp;</button>
                </div>

                <div class="col-3 ml-5 row"  >
                  <div align="right" class="ml-5" style="text-align: center">
                    <div class="btn-group" role="group" aria-label="Basic example">
                      <button type="button" class="btn btn-outline-success">上架</button>
                      <button type="button" class="btn btn-outline-danger">下架</button>
                    </div>
                    &lt;!&ndash; 添加商品模态框 &ndash;&gt;
                    <button type="button" class="btn btn-primary  ml-5"  data-toggle="modal" data-target="#add-good">
                      <span>&emsp;添加商品&emsp;</span>
                    </button>
                    &lt;!&ndash; Modal &ndash;&gt;
                    <div class="modal fade mt-5" id="add-good" tabindex="-1" aria-labelledby="#add-Lable" aria-hidden="true">
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h6 class="modal-title" id="add-Lable">编辑</h6>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body" >
                            <div class="">
                              <div class="col-10 ml-4 mb-4 form-inline">
                                <div class="col-4" align="right">排序&emsp;</div>
                                <div class="col-6" align="left"><input type="text" class="form-control"></input></div>
                              </div>
                              <div class="col-10 ml-4 mb-4 form-inline">
                                <div class="col-4" align="right"><span>商品名称&nbsp;<span style="color: red">*</span></span></div>
                                <div class="col-6" align="left"><input type="text" class="form-control"></input></div>
                              </div>
                              <div class="col-10 ml-4 mb-4 form-inline">
                                <div class="col-4" align="right"><span>商品分类&nbsp;<span style="color: red">*</span></span></div>
                                <div class="col-6" align="left">
                                  <select class="form-control" style="width: 160px">
                                    <option>沙比</option>
                                    <option>憨憨</option>
                                  </select>
                                </div>
                              </div>
                              <div class="col-10 ml-4 mb-4 form-inline">
                                <div class="col-4" align="right"><span>商品图片&nbsp;<span style="color: red">*</span></span></div>
                                <div class="col-6" align="left">
                                  <input type="file" id="add_ShopImgSelect" v-on:change="add_change()" class="mb-1">
                                  <div style="width: 80px;height: 80px;border: 1px solid #f6f6f6">
                                    <img src=" " id="add_ShopImg" alt="" width="80px" height="80px">
                                  </div>
                                </div>
                              </div>
                              <div class="col-10 ml-4 mb-4 form-inline" >
                                <div class="col-4" align="right" ><span>商品详情&nbsp;<span style="color: red">*</span></span></div>
                                <div class="col-6" align="left">
                                  <textarea style="width: 250px;height: 80px"></textarea>
                                </div>
                              </div>
                              <div class="col-10 ml-4 mb-4 form-inline">
                                <div class="col-4" align="right"><span>默认规格&nbsp;<span style="color: red">*</span></span></div>
                                <div class="col-6" align="left">
                                  <select class="form-control" style="width: 160px">
                                    <option>小份</option>
                                    <option>憨憨</option>
                                  </select>
                                </div>
                              </div>
                              <div class="col-10 ml-4 mb-4 row">
                                <div class="col-4 " align="right"><span>特色分类&nbsp;<span style="color: red">*</span></span></div>
                                <div align="left" class="col-6">

                                  <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio"  name="add_feature" id="add_good1" value="add-option1">
                                    <label class="form-check-label" for="add_good1">无</label>
                                  </div>
                                  <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio"  name="add_feature" id="add_good2" value="add-option2">
                                    <label class="form-check-label" for="add_good2">新品</label>
                                  </div>
                                  <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio"   name="add_feature" id="add_good3" value="add-option3">
                                    <label class="form-check-label" for="add_good3">热卖</label>
                                  </div>
                                  <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio"   name="add_feature" id="add_good4" value="add-option4">
                                    <label class="form-check-label" for="add_good4">推荐</label>
                                  </div>
                                </div>
                              </div>
                              <div class="col-10 ml-4 mb-4 form-inline">
                                <div class="col-4" align="right"><span>价格&nbsp;<span style="color: red">*</span></span></div>
                                <div class="col-6 input-group" align="left" >
                                  <input type="number" class="form-control col-5" step="0.01" max="999" min="0.10"></input>
                                  <div class="input-group-append">
                                    <span class="input-group-text" id="add-basic">元</span>
                                  </div></div>
                              </div>
                              <div class="col-10 ml-4 mb-4 form-inline">
                                <div class="col-4" align="right"><span>库存&nbsp;<span style="color: red">*</span></span></div>
                                <div class="col-6 input-group" align="left" >
                                  <input type="number" class="form-control col-5"  max="999" min="0"></input>
                                  <div class="input-group-append">
                                    <span class="input-group-text" id="add-basic2">件</span>
                                  </div></div>
                              </div>
                            </div>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-primary">保存</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12 mt-5">
                <table class="table table-striped table-hover" >
                  <thead>
                  <tr>
                    <th>排序</th>
                    <th>商品ID</th>
                    <th>商品名称</th>
                    <th>商品分类</th>
                    <th>商品详情</th>
                    <th>价格</th>
                    <th>库存</th>
                    <th>操作</th>
                  </tr>
                  </thead>

                  <tbody >
                  <tr >
                    <td>1</td>
                    <td>1</td>
                    <td class="p-0">
                      <div class="form-inline">
                      <div class="col-3">
                      <img src="static/img/LoginImg.png" style="float: left;margin-bottom: 11px" width="40" >
                    </div>
                        <div>
                          <span style="font-size: 15px">脆皮烧鸭饭</span>
                          <p><small>销量：0</small></p>
                        </div>
                      </div>
                     </td>
                    <td>热销</td>
                    <td><small>这是个烧鸭sdadasdsad</small></td>
                    <td>40.00</td>
                    <td>8</td>
                    <td>
                      <button type="button" class="btn btn-outline-success btn-sm" ><span style="font-size: 13px">上架</span></button>&emsp;

                      &lt;!&ndash; 编辑模态框 &ndash;&gt;
                      <button type="button" class="btn btn-outline-secondary btn-sm"  data-toggle="modal" data-target="#off-edit">
                        <span style="font-size: 13px">编辑</span>
                      </button>
                      &lt;!&ndash; Modal &ndash;&gt;
                      <div class="modal fade mt-5" id="off-edit" tabindex="-1" aria-labelledby="off-edit-lable" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h6 class="modal-title" id="off-edit-lable">编辑</h6>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body" >
                              <div class="" >
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right">排序&emsp;</div>
                                  <div class="col-6" align="left"><input type="text" class="form-control"></input></div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right"><span>商品名称&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6" align="left"><input type="text" class="form-control"></input></div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right"><span>商品分类&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6" align="left">
                                    <select class="form-control" style="width: 160px">
                                      <option>沙比</option>
                                      <option>憨憨</option>
                                    </select>
                                  </div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right"><span>商品图片&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6" align="left">
                                    <input type="file" id="off_ShopImgSelect" v-on:change="off_change()" class="mb-1">
                                    <div style="width: 80px;height: 80px;border: 1px solid #f6f6f6">
                                      <img src=" " id="off_ShopImg" alt="" width="80px" height="80px">
                                    </div>
                                  </div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline" >
                                  <div class="col-4" align="right" ><span>商品详情&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6" align="left">
                                    <textarea style="width: 250px;height: 80px"></textarea>
                                  </div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right"><span>默认规格&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6" align="left">
                                    <select class="form-control" style="width: 160px">
                                      <option>小份</option>
                                      <option>憨憨</option>
                                    </select>
                                  </div>
                                </div>
                                <div class="col-10 ml-4 mb-4 row">
                                  <div class="col-4 " align="right"><span>特色分类&nbsp;<span style="color: red">*</span></span></div>
                                    <div align="left" class="col-6">

                                      <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio"  name="shelf-feature" id="shelf" value="off-shelf1">
                                        <label class="form-check-label" for="shelf">无</label>
                                      </div>
                                      <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio"  name="shelf-feature" id="shelf2" value="off-shelf2">
                                        <label class="form-check-label" for="shelf2">新品</label>
                                      </div>
                                      <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio"   name="shelf-feature" id="shelf3" value="off-shelf3">
                                        <label class="form-check-label" for="shelf3">热卖</label>
                                      </div>
                                      <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio"   name="shelf-feature" id="shelf4" value="off-shelf4">
                                        <label class="form-check-label" for="shelf4">推荐</label>
                                      </div>
                                    </div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right"><span>价格&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6 input-group" align="left" >
                                    <input type="number" class="form-control col-5" step="0.01" max="999" min="0.10"></input>
                                    <div class="input-group-append">
                                      <span class="input-group-text" id="off-basic">元</span>
                                    </div></div>
                                </div>
                                <div class="col-10 ml-4 mb-4 form-inline">
                                  <div class="col-4" align="right"><span>库存&nbsp;<span style="color: red">*</span></span></div>
                                  <div class="col-6 input-group" align="left" >
                                    <input type="number" class="form-control col-5"  max="999" min="0"></input>
                                    <div class="input-group-append">
                                      <span class="input-group-text" id="off-basic2">件</span>
                                    </div></div>
                                </div>
                              </div>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-primary">保存</button>
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                            </div>
                          </div>
                        </div>
                      </div>
                        &emsp;
                      &lt;!&ndash; 下架会员价模态框 &ndash;&gt;
                      <button type="button" class="btn btn-outline-warning btn-sm"  data-toggle="modal" data-target="#off-user">
                        <span style="font-size: 13px">会员价</span>
                      </button>
                      &lt;!&ndash; Modal &ndash;&gt;
                      <div class="modal fade mt-5" id="off-user" tabindex="-1" aria-labelledby="off-user-lable" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h6 class="modal-title" id="off-user-lable">会员价</h6>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body" style="width: 750px" >
                              <div class="col-12" >
                                <div class="col-12 ml-4">
                                  <div class="form-group">
                                    <label for="">商品是否参与折扣</label>
                                  </div>
                                  <div>
                                  <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" v-on:click="zhekou1_click" name="RadioOptions" id="youhui1" value="off-youhui1">
                                    <label class="form-check-label" for="youhui1">是</label>
                                  </div>
                                  <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio"  v-on:click="zhekou2_click" name="RadioOptions" id="youhui2" value="off-youhui2">
                                    <label class="form-check-label" for="youhui2">否</label>
                                  </div>
                                </div>
                                </div>
                                <div v-show="flag" class="col-12" align="center">
                                  <table class=" col-12" style="width: 700px">
                                    <thead>
                                    <tr align="center">

                                      <th>VIP等级</th>
                                      <th>会员折扣</th>
                                      <th>启用状态</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    <tr align="center" >
                                      <td class="col-4" >1</td>
                                      <td class="col-4"><input type="number" class="form-control " step="0.01" min="0" max="1"> </td>
                                      <td  class="col-4"> <el-switch v-model="switch_table" /></td>
                                    </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </div>
                            </div>
                            &lt;!&ndash;尾部&ndash;&gt;
                            <div class="modal-footer">
                              <button type="button" class="btn btn-primary">保存</button>
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            </div>
                          </div>
                        </div>
                      </div>-->

                    </td>
                  </tr>
                  </tbody>
                </table>
                <nav aria-label="Page navigation example">
                  <ul class="pagination">
                    <li class="page-item">
                      <a class="page-link" href="#" aria-label="Previous" @click="getGoodsInfo(goodsInfoList.prePage)">
                        <span aria-hidden="true" >&laquo;</span>
                      </a>
                    </li>
                    <li class="page-item"><a class="page-link" @click="getGoodsInfo(1)">1</a></li>
                    <li class="page-item"><a class="page-link" @click="getGoodsInfo(2)">2</a></li>
                    <li class="page-item"><a class="page-link" @click="getGoodsInfo(3)">3</a></li>
                    <li class="page-item">
                      <a class="page-link" href="#" aria-label="Next" @click="getGoodsInfo(goodsInfoList.nextPage)">
                        <span aria-hidden="true" >&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
              </div>
            </el-tab-pane>


          </el-tabs>
        </div>

      </div>
    </div>
  </div>
</div>
</template>

<script>
import service from "../utils/axios";
export default {
  name: "ProductList",
  data() {
    return {
      activeName: 'first',
      flag:false,
      switch_table:false,
      goodsCategory : null,
      goodsInfoList : null,
      name : null
    };
  },
  methods: {
    getGoodsInfo : function (pageNum){
      service.get("/goodsInfo/queryList",{
        params : {
          "name" : this.name,
          "pageNum" : pageNum
        }
      })
      .then(data=>{
        this.goodsInfoList = data.data.data;
      })
      .catch(error=>{
        alert("出现错误");
      })
    },









    handleClick(tab, event) {
      console.log(tab, event);
    },
    zhekou1_click(){
      this.flag=true;
    },
    zhekou2_click(){
      this.flag=false;
    },
    put_change(){
      var file =  document.getElementById('put_ShopImgSelect').files[0];
      var re = new FileReader();
      re.readAsDataURL(file);
      re.onload = function(re){
        $('#put_ShopImg').attr("src", re.target.result);
        console.log(re.target.result )
      }
    },
    off_change(){
      var file =  document.getElementById('off_ShopImgSelect').files[0];
      var re = new FileReader();
      re.readAsDataURL(file);
      re.onload = function(re){
        $('#off_ShopImg').attr("src", re.target.result);
        console.log(re.target.result )
      }
    },
    add_change(){
      var file =  document.getElementById('add_ShopImgSelect').files[0];
      var re = new FileReader();
      re.readAsDataURL(file);
      re.onload = function(re){
        $('#add_ShopImg').attr("src", re.target.result);
        console.log(re.target.result )
      }
    },
  },
  created() {
    this.getGoodsInfo(1);
  }
}
</script>

<style scoped>

</style>
